GC Practical Example (JavaScript)

Use this walkthrough to explain how you investigate memory leaks in frontend apps.

Scenario

A dashboard re-renders frequently and retains DOM nodes after navigation.

Steps

1. Open Chrome DevTools → Memory.
2. Take a heap snapshot.
3. Navigate away and take another snapshot.
4. Compare retained nodes and detached DOM trees.

Fix pattern

• Remove event listeners on unmount.
• Null out large references in caches.

useEffect(() => {
  const handler = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler);
}, []);

Interview prompt

• Explain how you confirm a leak is resolved.